<template>
    <div class="loginPage">
        <img src="./../assets/logo.png" class="loginLogo"/>
        <h5>{{ msg }}</h5>

        <div class="divAccount">
            <div>
                <input name="account" type="text" placeholder="请输入账号" class="accountInput" v-model="userAccount"/>
            </div>
        </div>

        <div class="divAccount">
            <div>
                <input name="pwd" type="password" placeholder="请输入密码" class="passwordInput" v-model="userPassword"/>
            </div>
        </div>

        <div class="divAccount">
            <div>
                <button class="loginBtn" v-on:click="login()">登录</button>
            </div>
        </div>

        <div class="divAccount">
            <div>
                <button type="submit" class="forgetPwdBtn">忘记密码</button>
            </div>
        </div>
    </div>
</template>

<script>
    import JsEncrypt from 'encryptlong'
    export default {
        name: "Login",
        data() {
            return {
                msg: "OLSL管理系统",
                userAccount: "",
                userPassword: "",
            };
        },
        methods: {
            async login() {
                console.log("account=", this.userAccount);
                console.log("password=", this.userPassword);

                let postData = {
                        merchantId: "3b138a41030e41e6b89516e9edd95f43",
                        param:{
                            searchTime: "20200613",
                            shopId: ""
                        },
                        userId: "50169"
                    }
                this.$axios({
                    method: "POST",
                    url: "/api-schedule/app/report/listPageDailySalesSummary",
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8"
                    },
                    transformRequest: [function (data) {
                        // 对 data 进行任意转换处理
                        console.log("============data=========", data);
                        console.log("111111111=", JSON.stringify(data));
                        const publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDc+fzDcXcJl6jcIgM78sXcffmlJSLTPMjrq25i9WLDA8JJnrrUw3BEqRXOXV82BqYN3PI3pqZcd8ocmAn+gueuv2PC0J8LVveCU/2AOg5hRwtrFVO44J0m/VP0MWTNt5TUpK4O1RYew+pYTXuE81/W5p30cDkFvzFIpBCYLqdm+wIDAQAB";
                        let jse = new JsEncrypt();

                        // //设置公钥
                        jse.setPublicKey(publicKey);
                        const data2 = jse.encryptLong(JSON.stringify(data));
                        console.log('data2=', data2)

                        jse.setPrivateKey("MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBANz5/MNxdwmXqNwiAzvyxdx9+aUlItM8yOurbmL1YsMDwkmeutTDcESpFc5dXzYGpg3c8jemplx3yhyYCf6C566/Y8LQnwtW94JT/YA6DmFHC2sVU7jgnSb9U/QxZM23lNSkrg7VFh7D6lhNe4TzX9bmnfRwOQW/MUikEJgup2b7AgMBAAECgYAB+q875OlHCbe2eQuEXvFMv0gcJZABSlsWWUu80SvYSVFVLXnI7BM2WjlaxtVSe47DMwZsXy7AR0ZlKSt1vyBqGQI47qgQzlmcdnRPauNxt/VnMdtGHdNh7NCkXVGxIlCp9Z1ArgO32myDi8Q6aLICYap1LYplup1vNu3G31+wkQJBAPvehty7SQfdkLBzygS+D+kc46JNMncKjgeA0D7+WXiMJ5J2+sgxeu4Ud8ktSI0+7GK3pwWQN/K8/APtfiIKs7MCQQDgmcHkoGU8KpkUJ6Q9qQVOnVg8Tn70edj7rt1QI/eDl5oyZS2qKEutjX60YHnstLnP2pht5b4X1MFYnixM6XuZAkEAx4OMfQl2Xl6qoLv4CS2tWNFjmEticF3SCCuHyn6czRroteK94Rsg77sS8C+IyypPAhvMmGGXkBcX4tycD8c+dQJBANP4yUGZD3JFUcvvzdZT2qpjXY8tFixtgxel5UFpcIRFZEYDr6FT/niBff+GvgtkVamRySKPHWUoaoHUZkMAaKECQBc/JKTHomVteBtmoM0AP6+kYewGLUCr1uvoTVAnyNIPhZhcZ5Iv+BXvxSdEryJfLh0nWiMCmvP5or0sQGuQ0Tw=");
                        let temp = jse.decrypt(data2);
                        console.log("=temp=", temp)

                        return data2;
                    }],
                    params: {
                        access_token: 123456,
                        type: 2
                    },
                    data: postData
                }).then(function (response) {
                    console.log("response", response);
                }).catch(error => console.log(error, "error"));
            }
        }
    };
</script>

<style scoped>
    .loginLogo {
        width: 80px;
        height: 80px;
    }

    .divAccount {
        padding: 0 30px;
    }

    .accountInput {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #dbdbdb;
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }

    .passwordInput {
        margin-top: 10px;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #dbdbdb;
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }

    .loginBtn {
        margin-top: 30px;
        width: 100%;
        height: 40px;
        text-align: center;
        color: white;
        background-color: #00a29a;
        border: none;
        font-size: 17px;
        border-radius: 7px;
    }

    .forgetPwdBtn {
        margin-top: 20px;
        width: 100%;
        height: 40px;
        text-align: center;
        color: white;
        background-color: #00a29a;
        border: none;
        font-size: 17px;
        border-radius: 7px;
    }
</style>